<template>
  <div class="botart_addblock" id="botart_addblock" v-if="addbLockpop">
      <div @click="addABlock"> <img :src="$ossLink+'/app/bot/add_block.png'" alt=""> Add a block</div>
      <div @click="addAParallelBlock" v-if="paralStatus"> <img :src="$ossLink+'/app/bot/add_branch_block.png'" alt="">Add a parallel block</div>
  </div>
</template>
<script>
import { Component } from './drawLine.js'
export default {
  props: {
    popStatus: Number
  },
  data () {
    return {
      boxWidth: 180,
      addbLockpop: false,
      nodeInfo: null,
      paralStatus: true
    }
  },
  watch: {
    popStatus () {
      this.addbLockpop = false
    }
  },
  created () {
    Component.$on('botBlockBut', (val) => {
      this.setBloackBoxLocation(val)
    })
    Component.$on('botBlockButs', (val) => {
      this.setBloackBoxLocation(val)
    })
  },
  methods: {
    setBloackBoxLocation (data) {
      this.addbLockpop = true
      if (data.fromfixe) this.paralStatus = false
      else this.paralStatus = true
      this.$nextTick(() => {
        if (data) {
          this.$el.style.display = 'block'
          this.$el.style.top = data.postion.cavTop + 26 + 'px'
          this.$el.style.left = data.postion.cavLeft - this.boxWidth / 2 + 26 / 2 + 'px'
          this.nodeInfo = data.node
          this.$emit('nodeInfo', data.node)
        }
      })
    },
    addAParallelBlock () {
      this.addbLockpop = false
      this.$emit('addBlock', 2)
    },
    addABlock () {
      this.addbLockpop = false
      this.$emit('addBlock', 1)
      document.querySelector('.fixed_arc-line').style.display = 'none'
    }
  }
}
</script>
<style lang="scss">
.botart_addblock{
  position: absolute;
  background-color: #fff;
  width: 180px;
  box-shadow: 0px 0px 8px 0px #F0F0F0;
  z-index: 100;
  >div{
    font-size: 14px;
    color: #404040;
    line-height: 40px;
    height: 40px;
    padding: 0 10px;
    cursor: pointer;
    img{
      width: 14px;
      height: 14px;
      margin-right: 10px;
    }
  }
  >div:hover{
    background-color: #F0F0F0;
  }
}
</style>
